@font-face {
  font-family: "Satoshi-Variable";
  src: url("/fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: "Satoshi-Variable Fallback";
  src: local("Arial");
  font-weight: 300 900;
  font-style: normal;
  ascent-override: 92.36%;
  descent-override: 21.95%;
  line-gap-override: 9.14%;
  size-adjust: 109.35%;
  font-display: optional;
}

@font-face {
  font-family: "Martian Mono";
  src: url("/fonts/MartianMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: "Hack";
  src: url("/fonts/hack-regular-subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}

html {
  color-scheme: dark;
  margin-left: calc(100vw - 100%);
  margin-right: 0;
}

body {
  --at-apply: "font-sans p-5 m-auto lg:max-w-60vw max-w-screen text-(left neutral-300) break-words leading-6 antialiased flex flex-col min-h-screen";
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  word-wrap: break-word;
  width: 100%;
  background: radial-gradient(circle at 50%, #111 0%,#00222210 100%);
  font-family:
    "Satoshi-Variable",
    "Helvetica Neue",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Oxygen,
    Ubuntu,
    Cantarell,
    "OpenSans",
    "Helvetica Neue",
    sans-serif;
}
main {
  --at-apply: "flex-grow flex flex-col";
}

.grain {
  --at-apply: "z-40 pointer-events-none fixed overflow-hidden inset-0 -left-[200%] -r-[200%] w-[400%] h-full bg-[url('/images/framernoise.png')] bg-left-top bg-[length:250px]";
  opacity: 0.03;
}

@-moz-document url-prefix() {
  .grain {
    opacity: 0.01;
  }
}

@media (prefers-reduced-transparency) {
  .grain {
    display: none;
  }
}

h1 {
  --at-apply: "font-black text-(4xl neutral-100)";
}

h2 {
  --at-apply: "font-extrabold text-3xl text-neutral-100 3xl:text-5xl";
}

h3 {
  --at-apply: "font-bold text-(xl neutral-100)";
}

.faq h3 {
  --at-apply: "pb-1";
}

p {
  --at-apply: "text-(neutral-300 md) lg:text-lg 3xl:text-3xl";
}

b {
  --at-apply: "font-medium text-neutral-100";
}

a {
  --at-apply: "text-themeAccent hover:underline underline-offset-2";
}

a:not(:has(> *)) {
  --at-apply: "underline";
}

article {
  --at-apply: "text-justify";
}

article a {
  --at-apply: "text-neutral-100 font-medium underline underline-offset-2";
}

textarea {
  --at-apply: "w-full text-16px";
}

input {
  --at-apply: "text-16px";
}

content {
  line-height: 1.6;
}

img {
  --at-apply: "max-w-full h-auto my-8 rounded-xl border border-neutral-800";
}

code {
  --at-apply: "font-mono text-(sm neutral-100) bg-themeBlack p-2.5px rounded border border-neutral-800";
}

pre {
  --at-apply: "font-mono rounded-xl border border-neutral-800 p-4 my-8 text-sm scrollbar scrollbar-w-8px scrollbar-h-8px scrollbar-thumb-color-neutral-700 scrollbar-track-color-neutral-600 scrollbar-rounded  overflow-y-auto";
}

pre > code {
  --at-apply: "font-mono";
  all: unset;
}

blockquote {
  --at-apply: "rounded-xl bg-themeBlack border border-neutral-700 p-4";
}

ul,
ol {
  --at-apply: "ml-8";
}

ul > li {
  --at-apply: "list-disc text-lg pb-2";
}

ul > li::marker {
  --at-apply: "text-neutral-500";
}

ol > li {
  --at-apply: "list-decimal text-lg pb-2";
}

.text-john {
  color: transparent;
  background: linear-gradient(322deg, #ff1b6b, #45caff);
  background-clip: text;
  -webkit-background-clip: text;
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;

    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;

    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;

    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;

    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;

    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;

    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;

    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --ring: 240 10% 3.9%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;

    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;

    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;

    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;

    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;

    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;

    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;

    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

    --ring: 240 4.9% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
